Transparencias l l

Hace algún tiempo me quitaba una espinita que tenía clavada, era sobre el tema "Transparencias" y sobre ese tema tenía una entrada pendiente que Sidhe and Darky me recordaba el otro día.
Se trataba de añadir transparencia a todo el contenido del blog en lugar de hacerlo en main y sidebar como en la otra ocasión.
La cuestión es simple si antes añadíamos dos columnas de transparencia ahora lo haríamos con una.
Lo primero de todo es añadir una imagen de fondo, en Edición de HTML localizamos body { y añadimos la imagen de esta forma: background:url('url-imgen');
El resultado sería algo así:

Vamos a cubrir main y sidebar con la misma transparencia y nos vamos a situar justo antes de ]]></b:skin> para añadir lo siguiente:

.overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 100%;

background:#0873dd;  /* color de la transparencia */

opacity: 0.25;   /* aumentar-disminuir transparencia */

-moz-opacity: 0.25;  /* aumentar-disminuir transparencia */

filter:alpha(opacity=25);   /* For IE6&7 */ /* aumentar-disminuir transparencia */

}

.container {

position: relative;

float: left;

}

.content {

position: relative;   /* Fixes the z-index */

float: left;

}

#column-1 {   /* ampliar transparencia */

width: 780px;   

}

#column-1 .content {  /* contenido de la transparencia */

padding: 20px;

width: 800px;

}

/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
* html #column-1 .overlay { 
height:expression(document.getElementById("column1").offsetHeight); }

* html #column-2 .overlay { 
height:expression(document.getElementById("column2").offsetHeight); }

A continuación  nos situamos en <div id='header-wrapper'> justo antes añadimos:

<div class='container' id='column-1'>

<div class='overlay'/>

<div class='content'>

Por último nos vamos al final de la plantilla y justo antes de </body> añadimos:

</div>

</div>

Con eso lo que hicimos fue crear un bloque desde el header hasta el final de body ese bloque será el que contiene la transparencia y el color que añadiremos.

Si miráis en vista previa seguramente estará todo deformado eso es porque no coinciden las medidas y  hay que modificarlas porque como es lógico todas las plantillas no son iguales.
La que puse para el ejemplo tiene width:800px; en outer-wrapper.

Lo que haremos será mirar nuestra plantilla y la misma medida que tiene en outer-wrapper añadirla en #column-1 .content { ¿por qué? porque es el total del contenido, si añadiéramos más empujaría el contenido de nuestra sidebar y se desplazaría hasta perderse. Si añadimos menos no le dejamos espacio y la desplazaría hasta abajo. De todas formas no hay números exactos podéis probar y mirar en vista previa el resultado.

En #column-1 { hay de width: 780px; su trabajo es extender la transparencia hasta cubrir el contendido de main y sidebar lo calculamos considerando la suma de main-wrapper y sidebar-wrapper incrementando por ejemplo 80 para los extremos.
Un ejemplo sería:
main-wrapper:width:410px + sidebar-wrapper:width:220 + 80px = column-1:width: 710px;